// react 中的类型校验
import PropTypes from "prop-types"
import React from "react"
// console.log(React)

export const DemoOne = (props) => {
    console.log(props);
    let { title, className, style, x, children } = props
    /**
     * 将传递过来的children转换成数组形式，对数组做处理
     */
    // children为undefined的情况,说明并没有children这个属性
    // if(!children){
    //     window.children = []
    // }else if(!Array.isArray(children)){
    //     window.children = [children]
    // }

    // 要对children的类型做处理：可以基于 React.Children 对象中提供的方法进行处理
    // 好处：这些方法的内部，已经对children的各种形式进行了处理，对于undefined以及不是数组这种情况都进行了处理
    children = React.Children.toArray(children) // 将传进来的值都转换成数组形式,有多个api可以查看文档
    
    let headerSort=[],footerSort=[],defaultSort=[];
    children.forEach(child => {
        let {slot} = child.props
        if(slot == 'header'){
            headerSort.push(child)
        }else if(slot == 'footer'){
            footerSort.push(child)
        }else{
            defaultSort.push(child)
        }
    });


    return (
        <div className={`demo-box ${className}`} style={style}>
            {/* {children[0]} */}
            {headerSort}
            <br />
            <h1>{title}</h1>
            <span>{x}</span>
            {defaultSort}
            {/* <span>我是虚拟dom:{children}</span> */}
            {/* {children[1]} */}
            <br />
            {footerSort}
        </div>
    )
}

/** 通过把函数当成对象， 设置静态的私有属性方法 ，来给其设置属性的校检规则  */

DemoOne.defaultProps = {
    x: 0,
}

// 设置props的校检规则
DemoOne.propTypes = {
    // 类型是字符串
    title: PropTypes.string.isRequired,
    y: PropTypes.oneOfType([
        // 多种类型中的一种
        PropTypes.number,
        PropTypes.string,
    ]),
}
